<script setup>
import {onMounted, ref, reactive} from 'vue'
import axios from 'axios';
import router from "@/router";
import store from "@/store";
import {User, Lock} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

onMounted(() => {
    var images = ['1.png', '2.png', '3.png', '4.png', '5.png'];
    var randomIndex = Math.floor(Math.random() * images.length);
    var selectedImage = images[randomIndex];
    document.getElementById('big-pic').style.backgroundImage = "url('../../img/" + selectedImage + "')";
});
</script>

<template>
    <div style="width: 100%;height: 965px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
        <div id="big-pic">
        </div>
        <div class="welcome-title">
            <div style="font-size: 50px;font-weight: bold">欢迎来到我们的API开放平台</div>
            <div style="font-size: 20px;margin-top: 10px">致力于为客户提供标准的API服务和定制化的数据治理解决方案</div>
            <div style="font-size: 20px;margin-top: 5px">十年耕耘，每个API都经过严选，安全，稳定</div>
        </div>
        <div class="login-register-container">
            <transition name="el-fade-in-linear">
                <router-view/>
            </transition>
        </div>
    </div>
</template>

<style scoped>
@font-face {
    font-family: "Sphere fez"; /* 定义字体名称 */
    src: url('/src/assets/font/spherefez-ezxam.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}

#big-pic {
    width: 72%;
    height: 920px;
    margin-left: 10px;
    border-radius: 10px;
    background-size: cover; /* 图片按比例缩放并填充整个容器 */
    background-position: center; /* 图片在容器中居中显示 */
    background-repeat: no-repeat; /* 禁止图片重复 */
}

.login-register-container {
    width: 25%;
}

.welcome-title {
    position: absolute;
    bottom: 50px;
    left: 30px;
    color: white;
    text-shadow: 0 0 10px black;
}
</style>